<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="example-1">
        <!-- `picked` is a string "a" when checked -->
        <input type="radio" v-model="picked" value="a">

        <!-- `toggle` is either true or false -->
        <input type="checkbox" v-model="toggle">

        <!-- `selected` is a string "abc" when the first option is selected -->
        <select v-model="selected">
            <option value="abc">ABC</option>
        </select>
    </div>

    <div id="example-2">
        <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

        <input type="radio" v-model="pick" v-bind:value="a">

        <select v-model="selected">
            <!-- 内联对象字面量 -->
            <option v-bind:value="{ number: 123 }">123</option>
        </select>
    </div>
</body>

<script type="text/javascript">
    var example1 = new Vue({
        el: '#example-1',
        data: {
            picked: 'b',
            toggle: true,
            checked: false,
            selected: 'abc'
        }
    })

    var example2 = new Vue({
        el: '#example-2',
        data: {
            toggle: true,
            a: "abv",
            pick: '',
            selected: '',
            number: ''
        }
    })

    // 当选中时
    example2.toggle === 'yes'
    // 当没有选中时
    example2.toggle === 'no'

    // 当选中时
    example2.pick === example2.a

    // 当选中时
    typeof example2.selected // => 'object'
    example2.selected.number // => 123

</script>

</html>